<template>
	<div>
		<el-container>
			<el-header class="homeHeader">
				<h3>南声 CMS 后台管理系统</h3>
				<el-dropdown @command="userOperstion">
					<span class="el-dropdown-link">
						{{loginer.username}}<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item command="userSettings">个人中心</el-dropdown-item>
						<el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</el-header>
			<el-container>
				<el-aside width="200px">
					<el-menu unique-opened router>
						<el-submenu :index='index' v-for="(item,index) in this.$router.options.routes" v-if="!item.hidden && item.meta.hasChild">
							<template slot="title">
								<i :class="item.meta.icon"></i>
								<span>{{item.meta.title}}</span>
							</template>
							<el-menu-item :index='child.path' v-for="(child,i) in item.children">
								<span>{{child.meta.title}}</span>
							</el-menu-item>
						</el-submenu>
						<div :key='index' v-for="(item,index) in this.$router.options.routes" v-if="!item.hidden && !item.meta.hasChild">
							<el-menu-item :index='child.path' v-for="(child,i) in item.children">
								<i :class="child.meta.icon"></i>
								<span>{{child.meta.title}}</span>
							</el-menu-item>
						</div>
					</el-menu>
				</el-aside>
				<el-main>
					<el-breadcrumb v-if="this.$route.path != '/Home'" separator-class="el-icon-arrow-right">
						<el-breadcrumb-item :to="{path:'/Home'}">首页</el-breadcrumb-item>
						<el-breadcrumb-item>{{this.$route.meta.title}}</el-breadcrumb-item>
					</el-breadcrumb>
					<h2 v-else class="welcomeInfo">欢迎使用南声CMS后台管理系统</h2>
					<router-view style="margin-top: 10px;"></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	export default {
		name: "Home",
		data: function() {
			return {
				loginer: this.$qs.parse(sessionStorage.getItem('loginer'))
			}
		},
		methods: {
			userOperstion: function(command) {
				if (command == 'userSettings') {
					alert('个人中心');
				} else if (command == 'logout') {
					this.$confirm('此操作退出登录，是否继续？', '退出', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'waring'
					}).then(() => {
						sessionStorage.removeItem('loginer');
						this.$router.replace('/');
						this.$message.success('退出登录')
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消操作'
						})
					})
				}
			}
		}
	}
</script>

<style>
	.homeHeader {
		background-color: #409eff;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.homeHeader h3 {
		color: #ffffff;
	}

	.el-dropdown-link {
		cursor: pointer;
		color: #ffffff;
	}

	.el-icon-arrow-down {
		font-size: 12px;
	}
	
	.fa{
		margin-right: 10px;
	}
	
	.welcomeInfo{
		color: #409eff;
		text-align: center;
		font-family: '楷体';
		letter-spacing: 6px;
	}
</style>
